<extend name="Base/common" />
<block name="body">
<header class="bar bar-nav">
  <a class="icon icon-left pull-left back"></a>
  <h1 class="title">详情</h1>
</header>
<style>

.progress{
  height: 7px;
  background: #cccccc;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  position: relative;
}
.progress-bar {
  float: left;
  width: 0%;
  height: 100%;
  font-size: @font-size-small;
  line-height: @line-height-computed;
  color: @progress-bar-color;
  text-align: center;
  background-color: @progress-bar-bg;
    .box-shadow(inset 0 -1px 0 rgba(0,0,0,.15));
    .transition(width .6s ease);
}
.progress .progress-bar{
  box-shadow: none;
  border-radius: 0;
  position: relative;
  -webkit-animation: animate-positive 2s;
  animation: animate-positive 2s;
}
    @-webkit-keyframes animate-positive{
      0% { width: 0; }
    }
    @keyframes animate-positive{
      0% { width: 0; }
    }

</style>
<div class="content">
  <div class="card demo-card-header-pic" style="margin:0px;">
    <div valign="bottom" class="card-header color-white no-border no-padding">
      <img class='card-cover' src="{$product_info.pic}" alt="">
    </div>
    <div class="card-content">
      <div class="card-content-inner">
        <p style="color:#333333;">{$product_info.title}</p>
        <p class="color-gray">目标 <span style="color:#FF2E2E;">￥{$product_info.total_fee}</span><span style="float:right; color:#FF2E2E;">￥{$product_info.current_fee}</span></p>
        <?php $je = ceil($product_info['current_fee']/$product_info['total_fee']*100);?>
        <?php $je_2 = $je > 100 ? 100 : $je;?>
        <div class="progress pink">
          <div class="progress-bar" style="width:{$je_2}%; background:#00E4E5;">
          </div>
        </div>
        <p><span>当前进度：{$je}%</span><span style="float:right; color:#777777;">{$product_info.online_time|date="Y-m-d",###}</span></p>
      </div>
    </div>
  </div>
  <!--标签页-->
  <div class="buttons-tab" style="margin-top:20px;">
    <a href="#tab1" class="tab-link active button">项目介绍</a>
    <a href="#tab2" class="tab-link button">项目进展</a>
    <a href="#tab3" class="tab-link button">风险提示</a>
  </div>
  <div class="content-block">
    <div class="tabs">
      <div id="tab1" class="tab active">
        <div class="content-block">
          {$product_info['desc_1']}
        </div>
      </div>
      <div id="tab2" class="tab">
        <div class="content-block">
          {$product_info['desc_2']}
        </div>
      </div>
      <div id="tab3" class="tab">
        <div class="content-block">
          {$product_info['desc_3']}
        </div>
      </div>
    </div>
  </div>
</div>
</block>
<block name="footer">
<nav class="bar bar-tab">
  <a class="tab-item external " href="#">
    客服
  </a>
  <a class="tab-item external" href="#">
    收藏
  </a>
  <a class="tab-item external" href="{:U('/product/buy_info', array('id' => $product_info['id']))}" style="color:#ffffff; width:3%; background:#FF2E2E;">
    去支持
  </a>
</nav>
</block>
